<script setup>
import { ref, onMounted } from "vue";
import http from "@/untils/http.js";

const userList = ref(null);
const getUserList = async () => {
  const response = await http.get("/user/getList");
  userList.value = response.data;
};

onMounted(() => {
  getUserList();
});
</script>

<template>
  <div>
    <h1>用户列表</h1>
    <ul style="display: flex;flex-wrap:wrap;">
      <li v-for="user in userList" :key="user.id" style="width: 180px;margin: 8px;">
          <el-link
            :href="'/user/' + user.id"
            type="primary"
            :underline="false"
            style="font-size: 20px;"
            >{{ user.name }}</el-link
          >
          <p>用户ID：{{ user.id }}</p>
          <p>性别：{{ user.gender }}</p>
          <p>生日：{{ user.birthday }}</p>
        <el-divider/>
      </li>
    </ul>
  </div>
</template>
